<template>
	<view class="pad-b50">
		<view class="block-tit f-s36 mar-t10">上门单号：SJ1234567899897289</view>
		<view class="map-box h-398 mar-t20" >
			<map 
				style="width: 100%; height: 100%" 
				:latitude="latitude" 
				:longitude="longitude" 
				:markers="markers"
			>
			</map>
		</view>
		<view class="technician-info bg-f bor-r16 padlr20 padtb24 mar-t20">
			<view class=" flex-a ju-bt">
				<u-avatar
					:src="getImg('wechat-icon')" 
					size="80rpx"
				></u-avatar>
				<view class="name-box flex-a ju-bt pad-l16">
					<view>陈雅馨</view>
					<view>长沙爱美丽美容院-美容师</view>
				</view>
			</view>
			<view class="info-form">
				<view 
					class="form-li flex-a ju-bt mar-t14" 
					v-for="(item, index) in formList"
					:key="index"
				>
					<view class="li-l flex-a">
						<view class="form-label">
							{{ item.label }}：
						</view>
						<view class="form-val">
							{{ item.val }}
						</view>
					</view>
					<view class="form-count" v-if="!index">
						<text class="form-label">已预约</text>
						<text class="form-val">45</text>
						<text>｜</text>
						<text class="form-label">剩余</text>
						<text class="form-val">8</text>
					</view>
				</view>
				
			</view>
		</view>
		<view class="product-box bg-f bor-r16 padlr20 padtb24 mar-t20">
			<view class="block-tit">预约项目：</view>
			<view 
				class="product-li mar-t24 flex"
				v-for="(item, index) in 2"
				:key="index"
			>
				<u--image
					:showLoading="true" 
					:src="getImg('vip-grid-icon1')"
					width="192rpx" 
					height="144rpx"
					radius="12rpx"
				></u--image>
				<view class="product-r h-144 pad-l20 flex-a ju-bt">
					<view class="flex-col ju-bt h-144">
						<view class="product-tit">瓷肌美白 通透亮肤</view>
						<view class="product-num">x1</view>
						<view class="product-price">¥1980</view>
					</view>
					<u-icon 
						name="close-circle" 
						color="#999999" 
						size="48rpx"
					></u-icon>
				</view>
			</view>
		</view>
		<view class="bg-f padlr20 padtb24 mar-t20">
			<view class="block-tit">备注：</view>
			<u--textarea 
				class="mar-t20"
				v-model="remarkVal" 
				placeholder="请输入"
				count
				height="240rpx"
				border="none"
			></u--textarea>
		</view>
		<view class="fot-btns flex-a ju-bt mar-t32">
			<view class="btn flex-center" @click="modalShow=true">取消订单</view>
			<view class="btn btn2 flex-center" @click="$goRouter('/pages/my/pages/orderSign')">已到达</view>
		</view>
		
		<modalTips
			:modalShow="modalShow" 
			:showConfirmButton="false"
			cancelText="知道了"
			title=" "
			@parentCancel="modalShow = false"
		>
			<view class="" slot="title">
				<view v-if="true" class="flex-col flex-center">
					<u--image
						:showLoading="true" 
						:src="getImg('success-img')"
						width="88rpx" 
						height="88rpx"
					></u--image>
					<view class="block-tit mar-t24">取消成功</view>
				</view>
				<view v-else class="flex-col flex-center">
					<u--image
						:showLoading="true" 
						:src="getImg('error-img')"
						width="88rpx" 
						height="88rpx"
					></u--image>
					<view class="block-tit mar-t24">取消失败</view>
				</view>
			</view>
			<view class="modal-tips flex-center mar-t24 pad-b40">
				<text v-if="true">一份钟内可以取消订单，您已成功取消！欢迎您下次光临！</text>
				<text v-else>美容师已出发，不可取消</text>
			</view>
		</modalTips>
	</view>
</template>

<script>
	import modalTips from '@/components/modalTips/modalTips.vue';
	export default {
		name: "orderHaveArrived", // 订单 已到达
		components: {
			modalTips
		},
		data() {
			return {
				/* 地图 */
				latitude: 28.174501,
				longitude: 112.999419,
				/* 地图标点信息 */
				markers: [
					{
						latitude: 28.174501,
						longitude: 112.999419,
						// iconPath: item.avatar,
						width: '20px',
						height: '30px',
						label: {
							content: `美容师正在上门 \n 距您1.3km，预计13分钟`,
							color: "#111111",
							padding: '20rpx',
							borderColor: "#fff",
							bgColor: '#fff',
							anchorY: '-15',
							anchorX: 15
						}
					}
				],
				formList: [
					{
						label: "资质",
						val: "5年"
					},{
						label: "电话",
						val: "13308292763"
					},{
						label: "店铺地址",
						val: "湖南长沙爱美丽美容272号"
					},{
						label: "服务顾问",
						val: "李思柔"
					},{
						label: "服务时间",
						val: "13:00～18:00"
					},
				],
				
				remarkVal: "",
				modalShow: false, 
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.modal-tips {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		line-height: 43rpx;
		text-align: left;
	}
	.fot-btns {
		.btn {
			width: 340rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}
		.btn2 {
			color: #FFFFFF;
			background: #FF7171;
		}
	}
	/deep/  .u-textarea {
		background: #F5F5F5;
		.u-textarea__count {
			background: #F5F5F5 !important;
			bottom: 20rpx;
		}
	}
	
	.product-box {
		.product-li {
			.product-r {
				width: calc(100% - 192rpx);
				.product-tit {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #111111;
				}
				.product-num {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
				.product-price {
					font-family: MiSans, MiSans;
					font-weight: 500;
					font-size: 32rpx;
					color: #FF7171;
				}
			}
		}
	}
	.technician-info {
		.info-form {
			& > *:not(:first-child) {
			  .li-l {
			  	width: 100%;
			  }
			}
			.form-label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}
			.form-val {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #111111;
				line-height: 33rpx;
			}
		}
		.name-box {
			width: calc(100% - 80rpx);
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #111111;
		}
	}
	.map-box {
		background-color: #f99;
	}
</style>